<template>
   <section class="father">
        <!-- 内容-头部 -->
        <el-row>
            <el-col :span="24">
                <div class="contentHeader">
                    <!-- 走马灯
                    <el-carousel  class="lunbotu"  arrow="never">
                        <el-carousel-item v-for="(item,index) in forData" :key="index">
                            <img :src="item.url" alt="">
                        </el-carousel-item>
                    </el-carousel> -->
                        <video width="100%" :fluid='false' :controls='false' preload="auto" :muted='true' :autoplay='true' :loop='true' :src="videoUrl"></video>
                        <!-- <video-player ref="videoPlayer" width="100%" :playsinline="true" :options="playerOptions"></video-player> -->
                </div>
                <!-- 定位栏 -->
                <div class="contentHeaderCon">
                    <h1 class="conHeaderTitle1">{{companyText1}}</h1>
                    <h1 class="conHeaderTitle2">{{companyText2}}</h1>
                    <div class="conHeaderBox" @click="consulting">
                        <p>获取报价</p>
                        <img class="jiantou" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/jiantou.png" alt="">
                    </div>
                    <div class="conHeaderTel">
                        <p><span>咨询电话:&nbsp;</span>{{companyTel}}</p>
                        <!-- <p>{{manager}}:{{managerTel}}</p> -->
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 内容-主体 -->
        <el-row>
            <el-col :span="24">
                <div class="contentContent1" >
                    <div v-for="(item,index) in forData1" :key="index" >
                        <div class="contentContent1_box1">
                            <div class="box">
                                <div><span class="textMax">{{item.number}}</span>{{item.name}}+</div>
                                <div class="xian"></div>
                            </div>
                            <div>{{item.laber}}</div>
                        </div>
                    </div>
                </div> 
            </el-col>
        </el-row>
        <!-- 内容-技术开发 -->
        <el-row>
            <el-col :span="24">
                <div class="contentContent2" >
                    <!-- 小标题 -->
                    <div>
                        <p class="titles">{{title2}}</p>
                        <p class="titleText">{{title2text}}</p>
                    </div>
                    <!-- 内容 -->
                    <div class="box contentContent2_box">
                        <div style="width:1452px">
                            <!-- left -->
                            <div class="con2ConBox clearFix">
                                <div class="item" :style="{backgroundImage:`url(${item.url})`}" v-for="(item,index) in technologyLeftData" :key="index">
                                    <div class="itemBox" style="display:table-cell;vertical-align: middle;">
                                        <div>
                                            <img class="con2Img" :src="item.icon" alt="">
                                        </div>
                                        <p class="con2ConBoxTitle">{{item.title}}</p>
                                    </div>

                                    <div class="maskLayerLeft" style="">
                                        <div class="maskLayerLeftBox">
                                            <img class="con2ImgMask" :src="item.icon" alt="">
                                            <div class="con2ConBoxTitle2">{{item.title}}</div>
                                        </div>
                                        <p class="con2ConBoxTitle3">{{item.subtitle}}</p>
                                        <div class="maskLayerLeftkW" @click="consulting">
                                            <p>立即咨询</p>
                                            <div class="checkCon6Img">
                                                <img class="jiantou kao" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/jiantou2.png" alt="">
                                                <img class="jiantou cao" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/jiantou.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- right -->
                            <div>
                                <div class="contentContent2_right" :style="{backgroundImage:`url(${item.url})`}" v-for="(item,index) in technologyRightData" :key="index">
                                    <div class="con2ConRight">
                                        <div>
                                            <img class="con2Img" :src="item.icon" alt="">
                                        </div>
                                        <p class="con2ConBoxTitle2">{{item.title}}</p>
                                    </div>
                                    <!-- hover隐藏数据 -->
                                    <div class="maskLayer" >
                                        <div class="maskLayerBox">
                                            <div class="maskLayerBox1">
                                                <img class="con2ImgMask" :src="item.icon" alt="">
                                                <div class="con2ConBoxTitle2">{{item.title}}</div>
                                            </div>
                                            <p class="con2ConBoxTitle3">{{item.subtitle}}</p>
                                            <div class="maskLayerkW" @click="consulting">
                                                <p>立即咨询</p>
                                                <div class="checkCon6Img">
                                                    <img class="jiantou kao" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/jiantou2.png" alt="">
                                                    <img class="jiantou cao" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/jiantou.png" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </el-col>
        </el-row>
        <!-- 内容-产品中心 -->
        <el-row>
            <el-col :span="24">
                <div class="contentContent3" id="products" >
                    <div class="contentContent3Bg">
                        <!-- 小标题 -->
                        <div>
                            <p class="titles" style="color:#FFFFFF" >{{title3}}</p>
                            <p class="titleText" style="color:#FFFFFF;">{{title3text}}</p>
                        </div>
                        <!-- 内容 -->
                        <div class=" contentContent3_box box">
                            <!-- left -->
                            <div class="contentContent3_left">
                                <div v-for="(item,index) in forData2" :key="index" >
                                    <div class="chooseCon3" :class="{'chooseCon3Type':item.product_cate_id == classType}" @click="chooseCon3(item.product_cate_id)">
                                        {{item.name}}
                                        <img class="jiantou" ref="jiantou" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/jiantou.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- right -->
                            <div class="box">
                                <div v-for="(item,index) in productData" :key="index">
                                    <div class="con3Box1">
                                        <!-- 上图 -->
                                        <div class="con3Box1Img">
                                            <img class="con3Img" :src="item.url" alt="">
                                        </div>
                                        <!-- 下内容 -->
                                        <div class="con3Box1Content">
                                            <p class="titleMin">{{item.title}}</p>
                                            <p class="titleTextMin">{{item.subtitle}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </el-col>
        </el-row>
        <!-- 内容-解决方案 -->
        <el-row>
            <el-col :span="24">
                <div class="contentContent4" >
                    <!-- 小标题 -->
                    <div>
                        <p class="titles">{{title4}}</p>
                        <p class="titleText">{{title4text}}</p>
                    </div>
                    <!-- 内容 -->
                    <div class="contentContent4_box">
                        <!-- top -->
                        <div class="contentContent4_top">
                            <div v-for="(item,index) in forData4" :key="index">
                                <div class="con4TopBox" :class="{'con4BoxHover':index==con4ClassType}" @mouseenter="con4changeClass(index)">
                                    <div class="con4ImgBox" style="display:flex;justify-content: center;">
                                        <img class="con4Img" :src="item.icon" alt="">
                                        <img class="con4ImgReplace" :src="item.t_icon" alt="">
                                    </div>
                                    <p class="con4text1">{{item.category_title}}</p>
                                    <p class="con4text2">{{item.category_subtitle}}</p>
                                </div>
                            </div>
                        </div>
                        <!-- bottom -->
                        <div class="contentContent4_bottom" :style="{backgroundImage:`url(${con4ConBgUrl})`}">
                            <!-- 定位栏 -->
                            <div class="con4Con">
                                <h1 class="con4ConTitle1">{{companyText11}}</h1>
                                <h1 class="con4ConTitle22">{{companyText22}}</h1>
                                <div class="checkW" @click="consulting">
                                    <p>立即咨询</p>
                                    <div class="checkCon6Img">
                                        <img class="jiantou kao" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/jiantou2.png" alt="">
                                        <img class="jiantou cao" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/jiantou.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </el-col>
        </el-row>
        <!-- 内容-开发九步走 -->
        <el-row>
            <el-col :span="24">
                <div class="contentContent5" >
                    <!-- 小标题 -->
                    <div>
                        <p class="titles">{{title5}}</p>
                        <p class="titleText">{{title5text}}</p>
                    </div>
                    <!-- 内容 -->
                    <div class="contentContent5_box">
                        <div>
                            <div style="display: flex;justify-content: center;">
                                <img class="con5Img" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/11.png" alt="">
                            </div>
                            <p>项目接洽</p>
                        </div>
                        <img class="dayu" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/dayu.png" alt="">
                        <div>
                            <div style="display: flex;justify-content: center;">
                                <img class="con5Img" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/22.png" alt="">
                            </div>
                            <p>需求分析</p>
                        </div>
                        <img class="dayu" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/dayu.png" alt="">
                        <div>
                            <div style="display: flex;justify-content: center;">
                                <img class="con5Img" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/33.png" alt="">
                            </div>
                            <p>签订合同</p>
                        </div>
                        <img class="dayu" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/dayu.png" alt="">
                        <div>
                            <div style="display: flex;justify-content: center;">
                                <img class="con5Img" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/44.png" alt="">
                            </div>
                            <p>原型设计</p>
                        </div>
                        <img class="dayu" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/dayu.png" alt="">
                        <div>
                            <div style="display: flex;justify-content: center;">
                                <img class="con5Img" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/55.png" alt="">
                            </div>
                            <p>UI设计</p>
                        </div>
                        <img class="dayu" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/dayu.png" alt="">
                        <div>
                            <div style="display: flex;justify-content: center;">
                                <img class="con5Img" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/66.png" alt="">
                            </div>
                            <p>代码开发</p>
                        </div>
                        <img class="dayu" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/dayu.png" alt="">
                        <div>
                            <div style="display: flex;justify-content: center;">
                                <img class="con5Img" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/77.png" alt="">
                            </div>
                            <p>项目测试</p>
                        </div>
                        <img class="dayu" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/dayu.png" alt="">
                        <div>
                            <div style="display: flex;justify-content: center;">
                                <img class="con5Img" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/99.png" alt="">
                            </div>
                            <p>发布上线</p>
                        </div>
                        <img class="dayu" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/dayu.png" alt="">
                        <div>
                            <div style="display: flex;justify-content: center;">
                                <img class="con5Img" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/100.png" alt="">
                            </div>
                            <p>项目维护</p>
                        </div>
                    </div>
                </div> 
            </el-col>
        </el-row>
        <!-- 内容-资讯动态 -->
        <el-row>
            <el-col :span="24">
                <div class="contentContent6" >
                    <!-- 小标题 -->
                    <div>
                        <p class="titles">{{title6}}</p>
                        <p class="titleText">{{title6text}}</p>
                    </div>
                    <!-- 内容 -->
                    <div class="contentContent6_box">
                        <div v-for="(item,index) in forData6" :key="index" @click="toNewsDetail(item)">
                            <div class="con6TopBox" >
                                <div class="con6TopBoxImgBox">
                                    <img class="con6Img" :src="item.cover" alt="">
                                </div>
                                <div class="con6TopBoxCon">
                                    <p class="con6text1">{{item.title}}</p>
                                    <p class="con6text2">{{item.subtitle}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="checkCon6" @click="toNewsDetails">
                        <p>查看更多</p>
                        <div class="checkCon6Img">
                            <img class="jiantou kao" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/jiantou2.png" alt="">
                            <img class="jiantou cao" src="http://admin.www.ciyuantiaoyue.com/cyty/public/images/jiantou.png" alt="">
                        </div>
                    </div>
                </div> 
            </el-col>
        </el-row>
   </section>
</template>

<script>
import {
    getWebsiteData,
    getWebsiteTuData,
    getWebsiteNumData,
    getWebsiteTitData,
    getWebsiteTechnology,
    getWebsiteProduct,
    getWebsiteProductCon,
    getWebsiteSolution,
    getWebsiteConsulting
} from '@/api/getData'
export default {
    data(){
        return{
            // 视频
            videoUrl:'',
            playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: true, //如果true,浏览器准备好时开始回放。
                controls: false, //控制条
                preload: 'auto', //视频预加载
                muted: false, //默认情况下将会消除任何音频。
                loop: true, //导致视频一结束就重新开始。
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                    type: 'video/mp4',
                    src: ''//你所放置的视频的地址，最好是放在服务器上
                }],
                // poster: "http://39.106.117.192:8080/static/indexImg.png", //你的封面地址（覆盖在视频上面的图片）
                width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: false,
                    durationDisplay: false,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true //全屏按钮
                }
            },
            forData:[
                // {id:1,url:'http://161.189.9.107:9999//resource/202009231648448425834.jpg'},
                // {id:2,url:'http://161.189.9.107:9999//resource/202010101144438029132.jpg'},
                // {id:3,url:'http://161.189.9.107:9999//resource/202010101145116824958.jpg'},
                // {id:4,url:'http://161.189.9.107:9999//resource/202010101145306876020.jpg'},
            ],
            forData1:[
                {number:100,laber:'服务经验',name:'年'},
                {number:100,laber:'技术研发团队'},
                {number:100,laber:'软件著作专利'},
                {number:100,laber:'顶级资质'},
                {number:100,laber:'优质案列'},
            ],
            forData2:[
                {id:1,laber:'电商系统'},
                {id:2,laber:'互联网电商系统'},
                {id:3,laber:'在线教育系统'},
                {id:4,laber:'PMS管理系统'},
            ],
            forData4:[
                // {id:1,laber1:'泛文化娱乐',laber2:'短视频,直播,UGC',url:'http://161.189.9.107:9999//resource/202010101959511534454.png'},
                // {id:2,laber1:'数字5G马拉松',laber2:'解决方案',url:'http://161.189.9.107:9999//resource/202010102000163407689.png'},
                // {id:3,laber1:'智慧互联网',laber2:'解决方案',url:'http://161.189.9.107:9999//resource/202010102000475718712.png'},
                // {id:4,laber1:'智慧园区3D可视化',laber2:'解决方案',url:'http://161.189.9.107:9999//resource/202010102001235931562.png'},
                // {id:5,laber1:'AI人脸考勤',laber2:'解决方案',url:'http://161.189.9.107:9999//resource/202010102007437448844.png'},
                // {id:6,laber1:'大数据BI',laber2:'解决方案',url:'http://161.189.9.107:9999//resource/202010102013324463639.png'}
            ],
            forData6:[
                {id:1,laber1:'因联科技携手贵州移动助力凉州六盘水大大大大',laber2:'近日,由因联科技打造的“5G智慧马拉松”小程序，全面上线',url:'http://161.189.9.107:9999//resource/202009231648448425834.jpg'},
                {id:2,laber1:'因联科技携手贵州移动助力凉州六盘水大大大大',laber2:'近日,由因联科技打造的“5G智慧马拉松”小程序，全面上线',url:'http://161.189.9.107:9999//resource/202009231648448425834.jpg'},
                {id:3,laber1:'因联科技携手贵州移动助力凉州六盘水大大大大',laber2:'近日,由因联科技打造的“5G智慧马拉松”小程序，全面上线',url:'http://161.189.9.107:9999//resource/202009231648448425834.jpg'},
            ],
            // 公司轮播信息
            companyText1:'次元跳跃',
            companyText2:'为企业创造价值的互联网IT',
            companyText11:'次元跳跃',
            companyText22:'为企业创造价值的互联网IT',
            companyTel:'40088208820',
            manager:'邱经理',
            managerTel:'13508095745',
            // 大标题与介绍
            title2:'技术开发',
            title2text:'以技术为核心驱动力，助力中国企业升级！',
            title3:'产品中心',
            title3text:'在服务中找标准，在标准中打造产品，因联标准化产品持续在更新',
            title4:'解决方案',
            title4text:'持续探索，具有前沿领域技术服务经验,并形成了稳健解决方案',
            title5:'开发九步走',
            title5text:'好流程是好项目的基础',
            title6:'咨迅动态',
            title6text:'让每个价值共享,时刻记录企业发展脚步',
            // 技术开发
            technologyLeftData:[],
            technologyRightData:[],
            // 产品中心
            productData:[],
            // 小标题
            title1Min:'B2C品牌直营电商1',
            title1textMin:'成熟稳定的B2C电商系统1',
            title1Img:'http://161.189.9.107:9999//resource/202010101614589332000.png',
            title2Min:'B2C品牌直营电商2',
            title2textMin:'成熟稳定的B2C电商系统2',
            title2Img:'http://161.189.9.107:9999//resource/202010101614589332000.png',
            title3Min:'B2C品牌直营电商3',
            title3textMin:'成熟稳定的B2C电商系统3',
            title3Img:'http://161.189.9.107:9999//resource/202010101614589332000.png',
            // 
            classType:1,
            con3ClassType:4,
            con4ClassType:0,
            con4ConBgUrl:'http://admin.www.ciyuantiaoyue.com/cyty/public/uploads/20201014/bdc27b4d9fc526a1f8cd5ce6ea4d0239.png',
            show:true,
            haidden:false,
            showJT:false,
            newName:''
        }
    },
    watch:{
        con4ClassType:{
            handler(newVal){
                if (this.forData4.length) {
                    // console.log('watch:'+newVal);
                    this.con4changeClass(newVal)
                }
            },
            immediate:true
        }
    },
    created(){
        this.getWebsiteTuDataList();
        this.getWebsiteNumDataList();
        this.getWebsiteTitDataList();
        this.getWebsiteTechnologyList();
        this.getWebsiteProductList();
        // 产品内容
        this.chooseCon3(1)
        this.getWebsiteSolutionList();
        this.getWebsiteConsultingList();
    },
    methods:{
        // 获取官网banner图
        async getWebsiteTuDataList(){
            try {
                const res = await getWebsiteTuData({}).then(res=>{
                    console.log('官网数据视频图片',res);
                    console.log(res.data.bannerUrl[0].url);
                    // console.log( this.playerOptions.sources[0].src);
                    this.videoUrl=res.data.bannerUrl[0].url
                    this.playerOptions.sources[0].src=res.data.bannerUrl[0].url
                    this.companyText1=res.data.list[0].theme
                    this.companyText2=res.data.list[0].subtitle
                    this.companyTel=res.data.list[0].landline
                })
            } catch (error) {}
        },
        // 获取官网时间年限~
        async getWebsiteNumDataList(){
            try {
                const res = await getWebsiteNumData({}).then(res=>{
                    // console.log('官网-数字数据',res);
                    this.forData1[0].number=res.data.experience
                    this.forData1[1].number=res.data.team
                    this.forData1[2].number=res.data.soft
                    this.forData1[3].number=res.data.qualifications
                    this.forData1[4].number=res.data.case
                })
            } catch (error) {}
        },
        // 获取官网大标题
        async getWebsiteTitDataList(){
            try {
                const res = await getWebsiteTitData({}).then(res=>{
                    // console.log('官网-大标题',res);
                    this.title2=res.data[0].title
                    this.title2text=res.data[0].subtitle
                    this.title3=res.data[1].title
                    this.title3text=res.data[1].subtitle
                    this.title4=res.data[2].title
                    this.title4text=res.data[2].subtitle
                    this.title5=res.data[3].title
                    this.title5text=res.data[3].subtitle
                    this.title6=res.data[4].title
                    this.title6text=res.data[4].subtitle
                })
            } catch (error) {}
        },
        // 技术开发
        async getWebsiteTechnologyList(){
            try {
                const res = await getWebsiteTechnology({}).then(res=>{
                    console.log('官网-技术开发',res);
                    this.technologyLeftData=res.data.left
                    this.technologyRightData=res.data.right
                })
            } catch (error) {}
        },
        // 产品中心
        async getWebsiteProductList(){
            try {
                const res = await getWebsiteProduct({}).then(res=>{
                    console.log('官网-产品中心',res);
                    this.forData2=res.data
                })
            } catch (error) {}
        },
        // 产品中心-点击左边右边内容图片变化
        async chooseCon3(id){
            console.log(id);
            this.classType=id
            // console.log(this.$refs.jiantou[id]);
            // this.$refs.jiantou[id].style.opacity="1"
            try {
                const res = await getWebsiteProductCon({id}).then(res=>{
                    console.log('产品中心内容',res);
                    // this.productData=res.data
                    this.productData=res.data.splice(0,3)
                    console.log( this.productData);
                })
            } catch (error) {}
        },
        // 解决方案
        async getWebsiteSolutionList(){
            try {
                const res = await getWebsiteSolution({}).then(res=>{
                    // console.log('官网-解决方案',res);
                    this.forData4=res.data
                })
            } catch (error) {}
        },
        // 动态咨询
         async getWebsiteConsultingList(){
            try {
                const res = await getWebsiteConsulting({}).then(res=>{
                    console.log('官网-动态资讯',res);
                    this.forData6=res.data
                })
            } catch (error) {}
        },
        // 点击咨询去往咨询详情
        toNewsDetail(item){
            console.log(item);
            let id=item.advisory_id
            switch (item.category_id) {
                case 1:
                   this.newName='行业动态'
                break;
                case 2:
                    this.newName='技术分享'
                break;
                case 3:
                    this.newName='公司动态'
                break;
            }
            let names=this.newName
            this.$router.push({
                path:'/newsDetail',
                query:{
                    id,names
                }
            });
            document.documentElement.scrollTop=0
        },
        // 去往咨询动态
        toNewsDetails(){
            this.$store.commit('changeIndex', 3)
            this.$router.push({
                path:'/news',
            });
            document.documentElement.scrollTop=0
        },
        // 产品中心
        con3changeClass(index){
            this.con3ClassType=index
            console.log(index);
        },
        // 解决方案-控制数据显示隐藏
        con4changeClass(index){
            this.con4ClassType=index
            console.log(index);
            console.log(this.forData4[index]);
            this.con4ConBgUrl=this.forData4[index].url
            console.log(this.con4ConBgUrl);
            this.companyText11=this.forData4[index].title
            console.log(this.companyText1);
            this.companyText22=this.forData4[index].subtitle
            console.log(this.companyText2);
        },
        // 咨询
        consulting(){
            document.documentElement.scrollTop=9000
        }
    },
}
</script>

<style scoped lang="scss">
*{
    margin: 0%;
    padding: 0%;
}
.father{
    min-width: 1920px;
}
.box{
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
}
.dayu{
    width: 18px;
    height: 31px;
    align-items: center;
}
.jiantou{
    margin-left: 3px;
    width: 30px;
    height: 13px;
}
.jiantouMin{
    margin-left: 3px;
    width: 25px;
    height: 9px;
}
/* 小标题 */
.titles{
    font-size: 46px;
    font-weight: bold;
    margin: 20px 0 20px 0;
}
/* 小标题介绍 */
.titleText{
    font-size: 24px;
    color: #000000;
    /* 超出的文本隐藏 */
    overflow:hidden;
    /* 溢出用省略号显示 */
    text-overflow:ellipsis;
    /* 溢出不换行 */
    white-space:nowrap;
}
/* 小小标题 */
.titleMin{
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    margin: 20px 0 20px 0;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
}
.titleTextMin{
    font-size: 18px;
    text-align: left;
    margin-bottom: 50px;
    padding-right: 20px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}
/* 查看更多 */
.check{
    width: 120px;
    height: 40px;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    padding-left: 7%;
    line-height: 40px;
    text-align: center;
    align-items: center;
    margin-top: 20px;
    font-size: 18px;
    color: #004EA2;
    border: 2px solid #004EA2;
}
.checkW{
    width: 160px;
    height: 45px;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    padding-left: 60px;
    text-align: center;
    align-items: center;
    line-height: 45px;
    margin-top: 80px;
    font-size: 20px;
    font-weight: bold;
    color: #004EA2;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
}
.checkW:hover{
    color: #FFFFFF;
    background-color: rgba(0,0,0,0);
    border: 1px solid #FFFFFF; 
}
.checkW:hover .kao{
    opacity: 0;
}
.checkW:hover .cao{
    opacity: 1;
}
/* 栅格布局 */
el-row {
    margin-bottom: 20px;
}
el-col {
    border-radius: 4px;
}
/* 内容头部 */
.contentHeader{
    height: 600px;
}
// /* 内容头部-走马灯 */
// .lunbotu{
//     height: 600px;
// }
// .el-carousel__arrow{
//     margin-top: 100px;
// }
// .el-carousel__item h3 {
//     height: 600px;
//     color: #475669;
//     font-size: 18px;
//     opacity: 0.75;
//     line-height: 600px;
//     margin: 0;
//     text-align: center;
// }
// .el-carousel__item:nth-child(2n) {
//     height: 600px;
//     background-color: #99a9bf;
// }
// .el-carousel__item:nth-child(2n+1) {
//     height: 600px;
//     background-color: #d3dce6;
// }
/* 定位内容 */
.contentHeaderCon{
    position: absolute;
    top: 20%;
    left: 10%;
    z-index: 100;
    cursor: pointer;
}
.conHeaderTitle1{
    font-size: 45px;
    color: #FFFFFF;
    margin-bottom: 40px;
}
.conHeaderTitle2{
    font-size: 57px;
    color: #FFFFFF;
    margin-bottom: 80px;
}
.conHeaderBox{
    width: 25%;
    height: 60px;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    padding-left: 10%;
    text-align: center;
    line-height: 55px;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #F4BB01;
}
.conHeaderBox:hover{
    width: 25%;
    height: 60px;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    padding-left: 10%;
    text-align: center;
    line-height: 55px;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #004EA2;
}
.conHeaderTel{
    font-size: 22px;
    margin-top: 30px;
    font-weight: bold;
    color: #FFFFFF;
}
/* 内容主体 */ 
.contentContent1{
    padding: 50px 0 50px 0;
    height: 200px;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    width: 80%;
    margin: auto;
    justify-content: space-evenly;
    font-size: 16px;
}
/* 时间，数字 */
.contentContent1_box1{
    margin-top: 50px;
    padding: 20px;
    line-height: 40px;
}
.textMax{
    font-size: 70px;
    font-weight: bold;
}
.xian{
    padding: 0.5px;
    margin-left: 80px;
    background-color: #DCDCDC;
    height: 40px;
}
/* 技术开发 */
.contentContent2{
    width: 78%;
    margin: auto;
    text-align: center;
}
.contentContent2_box{
    margin-top: 50px;
}
.con2ConBox{
    width: 1082px;  
    float: left; 
    cursor: pointer;
}
.con2ConBox .item{
    width: 712px;
    height: 345px;
    float: left;
    box-sizing: border-box;
    align-items: center;
    display:table;
    overflow: hidden;
    position: relative;
    transition: all 1s;
}
.maskLayerLeft{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 20%;
    padding: 100px 0 40px 40px;
    transition: all 1s;
    // background: red;
}
.con2ConBox .item:hover .maskLayerLeft{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: -3.5%;
    opacity: 0.65;
}
.maskLayerLeftBox{
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    text-align: left;
    align-items: center; 
    margin-bottom: 20px;
}
.maskLayerLeftkW{
    width: 140px;
    height: 45px;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    padding-left: 8%;
    text-align: center;
    align-items: center;
    line-height: 45px;
    margin-top: 60px;
    font-size: 20px;
    font-weight: bold;
    color: #004EA2;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF; 
    position: relative;
    transition: all 1s;

}
.maskLayerLeftkW:hover{
    width: 140px;
    height: 45px;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    padding-left: 8%;
    text-align: center;
    align-items: center;
    font-weight: bold;
    line-height: 45px;
    margin-top: 60px;
    font-size: 20px;
    color: #FFFFFF;
    background-color: rgba(255,255,255,0);
    border: 1px solid #FFFFFF; 
    position: relative;
}
.maskLayerLeftkW:hover .kao{
    opacity: 0;
}
.maskLayerLeftkW:hover .cao{
    opacity: 1;
}
.con2ConBox .item:hover{
    background-size: 120% 120%;
    transition: all 2s;

}
.con2ConBox .item:hover .itemBox{
    opacity: 0;
    display: none;
}

/*  */
.con2ConBox .item:nth-child(2),
.con2ConBox .item:nth-child(3){
    width: 345px;
}
.con2ConBox .item:nth-child(1){
    margin: 0 25px 25px 0;
}
.con2ConBox .item:nth-child(2){
    margin-bottom: 25px;
    .maskLayerLeft{
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box;
    }
}
.con2ConBox .item:nth-child(3){
    margin-right: 25px;
    .maskLayerLeft{
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box;
        text-align: left;
    }
}
.con2Img{
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}
.con2ConBoxTitle{
    font-size: 28px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
}
.con2ConBoxTitle2{
    font-size: 28px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
}
.con2ConBoxTitle3{
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    text-align: left;
}
/*  */
.contentContent2_right{
    float: right;
    width: 345px;
    height: 712px;
    margin-left: 25px;
    box-sizing: border-box;
    display:table;
    overflow: hidden;
    cursor: pointer;
} 
.con2ConRight{
    display:table-cell;
    vertical-align:middle;
}
/* 图片放大 */
.contentContent2_right:hover{
    background-size: 120% 120%;
    transition: all 10s;
    // background-color: #004EA2;
    // opacity: 0.65;
} 
.contentContent2_right:hover .con2ConRight:nth-child(1),
.contentContent2_right:hover .con2ConRight:nth-child(2){
    display: none;
} 
.contentContent2_right:hover .maskLayer{
    position: absolute;
    top: 170px;
    right: 13.4%;
    opacity: 0.65;
    visibility: visible;
    transition: all 0.5s;
} 
.maskLayer{
    width: 345px;
    height: 712px;
    // background: #004EA2;
    // opacity: 0;
    position: absolute;
    top: 180px;
    right:220px;
    box-sizing: border-box;
    color: #FFFFFF;
    z-index: 10;
    display:table-cell;
    vertical-align:middle;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    justify-content: center;
    visibility: hidden;
}
.maskLayerBox{
    width: 80%;
    margin: auto;
}
.maskLayerBox1{
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}
.con2ImgMask{
    width: 50px;
    height: 50px;
}
.maskLayerkW{
    width: 140px;
    height: 45px;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    padding-left: 14%;
    text-align: center;
    align-items: center;
    line-height: 45px;
    margin-top: 60px;
    font-size: 20px;
    font-weight: bold;
    color: #004EA2;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF; 
    position: relative;
}
.maskLayerkW:hover{
    width: 140px;
    height: 45px;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    padding-left: 14%;
    text-align: center;
    align-items: center;
    font-weight: bold;
    line-height: 45px;
    margin-top: 60px;
    font-size: 20px;
    color: #FFFFFF;
    background-color: rgba(255,255,255,0);
    border: 1px solid #FFFFFF; 
    position: relative;
}
.maskLayerkW:hover .kao{
    opacity: 0;
}
.maskLayerkW:hover .cao{
    opacity: 1;
}
/* 产品中心 */
.contentContent3{
    width: 100%;
    margin: 50px 0 50px 0;
    text-align: center;
    background-color: #35404d;
    // background-color: red;
}
.contentContent3Bg{
    padding: 50px 0 50px 0;
    width: 90%;
    margin: auto;
    background-image: url('http://161.189.9.107:9999//resource/202010141710281226837.png');
    background-size: cover;
}
.contentContent3_box{
    margin-top: 40px;
    margin-left: 80px;
    // padding: 0 40px 0 0;
}
.contentContent3_left{
    margin-right: 80px;
    cursor: pointer;
}
.chooseCon3{
    width: 230px;
    padding: 15px;
    margin-bottom: 5px;
    color: #FFFFFF;
    font-size: 22px;
    text-align: left;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    justify-content: space-between;
    align-items: center;
}
/* //////////////////////////////////////////////// */
.chooseCon3 img{
    margin-left: 3px;
    width: 30px;
    height: 13px;
    opacity: 0;
}
.chooseCon3:hover{
    width: 230px;
    padding: 15px;
    margin-bottom: 5px;
    color: #FFFFFF;
    font-size: 22px;
    text-align: left;
    background-color:  #004EA2;
}
.chooseCon3:hover img{
    margin-left: 3px;
    width: 30px;
    height: 13px;
    opacity: 1;
}
/* */
.chooseCon3Type{
    width: 230px;
    padding: 15px;
    margin-bottom: 5px;
    color: #FFFFFF;
    font-size: 22px;
    text-align: left;
    background-color:  #004EA2;
}
.chooseCon3Type img{
    margin-left: 3px;
    width: 30px;
    height: 13px;
    opacity: 1;
}
/* ///////////////////////////////////////////////// */
.con3Box1{
    width: 345px;
    height: 408px;
    margin-right: 30px;
    cursor: pointer;
}
.con3Box1:hover{
    color: #FFFFFF;
}
.con3Box1:hover img{
    width: 345px;
    height: 200px;
    margin-bottom: -2.8px;
    transform: scale(1.4);
}
.con3Box1Img{
    overflow: hidden;
    position: relative;
}
.con3Box1:hover .con3Box1Img::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}
.con3Box1:hover :nth-child(2){
    background-color: #004EA2;
    color: #FFFFFF;
}
.con3Box2{
    width: 345px;
    height: 408px;
    margin-right: 30px;
}
.con3Box3{
    width: 345px;
    height: 408px;
}
.con3Img{
    width: 345px;
    height: 200px;
    margin-bottom: -2.8px;
    transition: all 1s;
}
.con3Box1Content{
    height: 100px;
    background-color: #FFFFFF;
    padding: 10px 0 60px 20px; 
    color: #000;
    overflow: hidden;
}
/* 鼠标悬停样式 */
.con3BoxHover{
    background-color: #004EA2;
    color: #FFFFFF;
}
/* 解决方案 */
.contentContent4{
    text-align: center;
    margin: auto;
}
.contentContent4_box{
    margin: 50px 0 0 0 ;
}
.contentContent4_top{
    width: 80%;
    margin: auto;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    justify-content: space-evenly;
}
.con4ConTitle1{
    font-size: 45px;
    color: #FFFFFF;
    margin-bottom: 40px;
}
.con4ConTitle22{
    // text-indent:2em;
    line-height: 35px;
    font-size: 26px;
    color: #FFFFFF;
    margin-bottom: 80px;
}
/* 样式变换 */
.con4TopBox{
    text-align: center;
    cursor: pointer;
}
.con4TopBox:hover{
    text-align: center;
    color: #004EA2;
} 
.con4TopBox:hover .con4Img{
    width: 110px;
    height: 110px;
    opacity: 0;
} 

/* 鼠标悬停样式 */
.con4Img{
    width: 110px;
    height: 110px;
    z-index: 1;
}
.con4ImgReplace{
    width: 110px;
    height: 110px;
    position: absolute;
}
.con4text1{
    font-size: 22px;
}
.con4text2{
    font-size: 18px;
}
.contentContent4_bottom{
    height: 600px;
    margin: 20px 0 0 0 ;
    background-size: cover;
    cursor: pointer;
}
.con4Con{
    width: 50%;
    text-align: left;
    padding-right: 100px;
    position: absolute;
    top: 40%;
    left: 10%;
    z-index: 100;
    padding-top: 60px;
}
.conHeaderTitle22{
    font-size: 26px;
    color: #FFFFFF;
    margin-bottom: 80px;
}
/* 开发九步走 */
.contentContent5{
    margin: auto;
    text-align: center;
    padding: 50px 0 50px 50px; 
    background-color: #F9F9F9;
}
.contentContent5_box{
    width: 80%;
    margin: auto;
    margin-top: 50px;
    align-items: center;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    justify-content: space-evenly;
    font-size: 20px;
    line-height: 40px;
    color: #000000;
}
.con5Img{
    width: 53px;
    height: 53px;
}
/* 咨迅动态 */
.contentContent6{
    width: 80%;
    margin: auto;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}
.contentContent6_box{
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    justify-content: space-evenly;
    margin-top: 30px;
}
.con6TopBox{
    width: 451px;
    height: 499px;
    cursor: pointer;
}
// .con6TopBox:hover{
//     box-shadow:#000 0 0 3px  ;
// }
// .con6TopBox:hover .con6TopBoxImgBox::after{
//     content: '';
//     display: block;
//     width: 453px;
//     height: 304px;
//     background-color: rgba(0,0,0,.5);
//     position: absolute;
//     top: 0;
//     left: 0;
//     z-index: 999;
// }
.con6TopBoxImgBox{
    width: 451px;
    height: 304px;
    overflow: hidden;
    position: relative;
}
.con6TopBox:hover .con6Img{
    transform: scale(1.2);
}
.con6TopBox:hover .con6TopBoxCon{
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
}
.con6Img{
    width: 100%;
    height: 100%;
    margin-bottom: -3px;
    transition: all 1s;
}
.con6TopBoxCon{
    padding: 20px 20px 0 20px;
    text-align: left;
    border: 1px solid #EDEDED;
}
.con6text1{
    font-size: 24px;
    color: #000000;
    /* 超出的文本隐藏 */
    overflow:hidden;
    /* 溢出用省略号显示 */
    text-overflow:ellipsis;
    /* 溢出不换行 */
    white-space:nowrap;
}
.con6text2{
    height: 60px;
    font-size: 18px;
    color: #424242;
    margin: 30px 0 60px 0;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}
.checkCon6{
    width: 150px;
    height: 45px;
    margin: auto;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    align-items: center;
    font-weight: bold;
    padding-left: 3.5%;
    text-align: center;
    line-height: 45px;
    margin-top: 60px;
    font-size: 18px;
    color: #004EA2;
    border: 2px solid #004EA2;
    position: relative;
    cursor: pointer;
}
.checkCon6Img{
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
}
.cao{
    position: absolute;
    opacity: 0;
}
.checkCon6:hover{
    width: 150px;
    height: 45px;
    margin: auto;
    display: flex;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    align-items: center;
    font-weight: bold;
    padding-left: 3.5%;
    text-align: center;
    line-height: 45px;
    margin-top: 60px;
    font-size: 18px;
    background-color: #004EA2;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
}
.checkCon6:hover .cao{
    opacity: 1;
}
</style>